import React, { Component, createRef } from 'react'

interface refsInter {
  
}

interface RefObject<T> {
  // immutable
  readonly current: T | null
}


class DemoRef extends Component<{},{}, any> {
  state= {
    count: 1
  }
  // 第一种字符串类型的 ref
  logDemo1ref = () => {
    let value = this.refs.demo1ref.value
    console.log(value)
  }

  logDemo2ref = () => {
    let value = this.refs.demo2ref.value
    // console.log(value)
  }

  // 回调形式的ref
  logDemo3ref = (): void => {
    // state每次变动都会被触发
    // update时，每次都会触发，先为null 后为挂载的dom值
    // 每次更新都会清空旧的ref，并设置新的
    // console.log(this.logDemo3refinput.value)
  }

  refDemo4ref = (event) => {
    this.input2 = event
    console.log(event, '===')
  }

  logDemo4ref =() => {
    console.log(this.input2.value)
  }

  // createRef

  private myRef = createRef<HTMLDivElement>()

  render () {
    return (
      <div>
        <button onClick={() => {
          this.setState({
            count: this.state.count + 1
          })
        }}>+1</button>
        <br />
        <input ref="demo1ref" type="text" placeholder='点击按钮提示数据'/>
        <button onClick={this.logDemo1ref}>点击提示左侧的数据</button>
        <input ref="demo2ref" type="text" placeholder='失去焦点提示数据' onBlur={this.logDemo2ref}/>
        <br />
        回调函数的ref
        <br />
        <input ref={(event) => {
          // console.log(event)
          this.logDemo3refinput = event
          }} type="text" placeholder='失去焦点提示数据' onBlur={this.logDemo3ref}/>
          <br />
          class绑定，抵消每次数据更新出现null的情况
          <input ref={this.refDemo4ref} type="text" placeholder='失去焦点提示数据' onBlur={this.logDemo4ref}/>
          <br />
          <div ref={this.myRef} onClick={() => {
            console.log(this.myRef.current)
          }}>createRef</div>
      </div>
    )
  }
}

export default DemoRef